import React from "react"
import { bindActionCreators } from "redux"
import Router from 'next/router'
import { connect } from "react-redux"
import { changeDoType, changeId } from "../../store/blog.redux"

class BlogLeftItem extends React.Component {
    setBlogId() {
        const id = this.props.BlogReducer ? this.props.BlogReducer.id : 0
        if (id === this.props.id) return
        this.props.changeDoType('edit')
        this.props.changeId(this.props.id)
        Router.push({
            pathname: '/blog',
            query: { title: this.props.id }
        })
    }

    render() {
        return (
            <li className={this.props.className} onClick={() => this.setBlogId()}>
                <p className="list-a">{this.props.title}</p>
                <style jsx>{`
                    .menu-select {
                        color: white;
                        padding: 0 50px;
                        height: 62px;
                        font-size: 14px;
                        cursor: pointer;
                        background-color: #ead05c;
                    }
                    .list-content {
                        padding: 0 50px;
                        height: 62px;
                        font-size: 14px;
                        cursor: pointer;
                        max-width: 220px;
                        overflow: hidden;
                    }
                    .list-a{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        color: #2e2e2e;
                        overflow: hidden;
                    }
                `}</style>
            </li>
        )
    }
}

const mapStateToProps = ({ BlogReducer }) => ({ BlogReducer })
const mapDispatchToProps = (dispatch) => {
    return {
        changeDoType: bindActionCreators(changeDoType, dispatch),
        changeId: bindActionCreators(changeId, dispatch),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(BlogLeftItem)